<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe') 

// 取值的写法 只可以取值，赋值会有提示 computed value is readonly
// const fullName = computed(() => {
//   return firstName.value+'--'+lastName.value
// })

// 只有在计算属性需要赋值时才写
// 大部分情况下用 上面的简写形式 get 的简写即可
const fullName = computed({
  // 获取值 return 进行返回
  get() {
    return firstName.value+'--'+lastName.value
  },
  // 计算属性赋值如果实现了 set 就不会有警告
  // 可以通过 value 获取到设置的值
  set(value) {
    // console.log(value)
    // console.log(value.split(' '))
    firstName.value = value.split(' ')[0]
    lastName.value = value.split(' ')[1]
  }
})

</script>


<template>
  <div id="app">
   <h2>全名:{{ fullName }}</h2>
   <button @click="fullName='rose li'">计算属性赋值</button>
  </div>
</template>

<style>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>